<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>#div1{width:200px;height:200px;background-color: red; color:#fff;position: absolute;cursor:pointer;}</style>
<script>
//<!--拖拽涉及几个操作动作  鼠标按下  鼠标抬起  鼠标移动-->
/*鼠标拖拽原理*/

window.onload=function(){
   var oDiv=document.getElementById('div1');
   var disX=0;
   var disY=0;
   oDiv.onmousedown=function(ev){//鼠标按下
         var oEvent=ev||event;
         disX=oEvent.clientX-oDiv.offsetLeft;//距离横坐标
         disY=oEvent.clientY-oDiv.offsetTop;//距离纵坐标
       oDiv.onmouseover=function(ev){//鼠标移动，鼠标hover
           var oEvent=ev||event;
           oDiv.style.left=oEvent.clientX-disX+'px';
           oDiv.style.top=oEvent.clientY-disY+'px';
       };
       oDiv.onmouseup=function(){//鼠标抬起
           oDiv.onmouseover=null;//就需要把鼠标移动取消掉
           oDiv.onmouseup=null;
       };
   };
};

</script>
</head>
<body>
<div id="div1">
鼠标拖拽原理
  当鼠标按下就与方块之间有个距离，在一直拖拽过程中，这个距离不变
    第一步:求鼠标与方块之间的距离, 等于=当前鼠标位置-物体位置
    第二步：根据鼠标位置，计算出物体位置，等于=当前鼠标位置-鼠标与方块之间距离
</div>
</body>
</html>